<template>
  <div id="echart" style="width: 100%; height: 100%">echarts</div>
</template>
<script>
import * as echarts from "echarts";

export default {
  //  var chart = echarts.init(document.getElementById('echart'), 'dark');
  // var myChart = echarts.init(document.getElementById('main'), 'light')
  mounted() {
    const myChart = echarts.init(document.getElementById("echart"));
    window.onresize = function () {
      myChart.resize();
    };

    myChart.setOption({
      title: {
        // 标题
        text: "2216 班出勤统计",
      },
      tooltip: {}, // 鼠标悬停气泡
      xAxis: {
        type: "category",
        data: ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
      },
      yAxis: {},
      series: [
        {
          name: "出勤人数1",
          type: "bar",
          data: [40, 45, 35, 40, 42, 25],
        },
        {
          name: "出勤人数",
          type: "bar",
          data: [44, 44, 35, 99, 42, 95],
        },
        {
          name: "出勤人数111",
          type: "bar",
          data: [44, 44, 35, 99, 42, 95],
        },
      ],
    });
  },
};
</script>
<style scoped>
#echart {
  width: 80%;
  height: 400px;
}
</style>
